.mine-wrapper {
    position: relative;

    .mine-header {

        width: 100vw;
        height: 44vw;
        background-image: url(../images/mineImg/10001.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-position: 0 0;


        .header-top {
            width: 100vw;
            height: 12.8vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2.67vw 3.2vw;


            .top-back {

                a {

                    img {
                        width: 6.4vw;
                        height: 7.47vw;
                    }
                }
            }

            .top-kefu {
                display: flex;
                flex-direction: column;
                position: relative;

                &::after {
                    content: '';
                    width: 1.33vw;
                    height: 1.33vw;
                    background-color: #f00;
                    border-radius: 50%;
                    position: absolute;
                    top: 1.33vw;
                    right: 0.27vw;

                }


                img {
                    display: block;
                    width: 5.33vw;
                    height: 6.4vw;
                }

                span {
                    display: block;
                    font-size: 2.13vw;
                }
            }
        }
    }

    .header-bottom {
        width: 93.6vw;
        height: 25.07vw;
        background-color: #fff;
        margin: 1.33vw 3.2vw 2.13vw;
        padding: 2.67vw 5.33vw;
        border-radius: 2.67vw;

        .header-user {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;

            .user-avatar {


                img {
                    position: absolute;
                    top: -5.33vw;
                    left: 0;
                    width: 15.47vw;
                    height: 15.47vw;
                    border-radius: 50%;
                }
            }

            .user-info {
                width: 63.73vw;
                height: 13.07vw;
                margin-left: 3.2vw;

                h3 {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    margin-bottom: 0.8vw;

                    span:first-child {

                        font-size: 5.33vw;
                        margin-right: 1.07vw;
                        font-weight: 500;
                    }

                    i {
                        display: flex;

                        justify-content: flex-start;

                        img {
                            display: block;
                            width: 3.73vw;
                            height: 3.73vw;
                            margin-right: 0.53vw;
                        }

                        span {
                            display: block;
                            width: 12.8vw;
                            height: 3.73vw;
                            font-size: 3.2vw;
                            background-color: #e0f5ff;
                            color: 269cff;
                        }
                    }
                }

                span.sq {
                    border-top-left-radius: 2.67vw;
                    border-bottom-right-radius: 2.67vw;
                    color: #3ea332;
                    font-size: 3.07vw;
                    padding: 0.8vw 1.6vw;
                    background-color: #e8f9dc;

                }
            }

        }

        .header-fond {
            width: 82.93vw;
            height: 4.53vw;
            margin-top: 2.13vw;

            ul {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                height: 100%;

                li {
                    display: block;
                    color: #555555;
                    font-size: 3.2vw;
                    width: 9.33vw;
                    height: 4vw;
                    padding-right: 0.8vw;
                }

                li.gap-li {
                    display: block;
                    width: 0.27vw;
                    height: 2.67vw;
                    background-color: #e6e7e8cc;
                    margin: 0 2.67vw;
                    padding: 0;
                }
            }

        }
    }

    .mine-content {
        width: 100%;
        height: 142.4vw;
        padding: 2.13vw 3.2vw 3.2vw;
        background-color: #F8F8F8;
        border-top-left-radius: 2.67vw;
        border-top-right-radius: 2.67vw;
        position: absolute;
        top: 41.33vw;
        left: 0;

        .mine-sec1 {
            width: 93.6vw;
            height: 20.27vw;
            margin-bottom: 2.13vw;
            padding: 0 1.07vw;
            background-color: #fff;
            border-radius: 2.67vw;

            ul {
                display: flex;
                justify-content: space-around;
                align-items: center;

                li {
                    width: 22.93vw;
                    height: 100%;
                    padding: 2.93vw 0 2.67vw;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;


                    img {
                        display: block;
                        width: 9.6vw;
                        height: 9.6vw;

                    }

                    span {
                        display: block;
                        font-size: 3.47vw;
                        width: 14.87vw;
                        height: 4.27vw;
                    }
                }
            }
        }

        .mine-sec2 {
            width: 93.6vw;
            height: 16.53vw;
            background-color: #fff;
            margin-bottom: 2.13vw;
            padding: 0 1.07vw;
            border-radius: 2.67vw;

            .sec2-list {
                display: flex;
                justify-content: space-around;
                align-items: center;

                .sec2-item {
                    width: 22.93vw;
                    height: 16.53vw;
                    padding: 2.93vw 0 2.67vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    i {
                        display: block;
                        font-size: 4.53vw;
                        padding-bottom: 1.07vw;
                    }

                    span {
                        display: block;
                        width: 14.87vw;
                        height: 4.27vw;
                        font-size: 3.47vw;
                        text-align: center;

                    }
                }
            }
        }

        .mine-sec3 {
            width: 93.6vw;
            height: 31.47vw;
            background-color: #fff;
            margin-bottom: 2.13vw;
            padding: 0 1.07vw;
            border-radius: 2.67vw;

            .sec3-title {
                width: 91.47vw;
                height: 11.2vw;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .title-left {
                    width: 71.2vw;
                    height: 8vw;
                    padding: 3.2vw 3.2vw 0;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;

                    .my-wallet {
                        width: 16vw;
                        height: 4.8vw;
                        color: #000000;
                        margin-right: 3.2vw;
                        font-size: 4vw;
                    }

                    .gift-cash {
                        width: 21.33vw;
                        height: 4.27vw;
                        color: #111111;
                        font-size: 3.47vw;
                        position: relative;

                        &::after {
                            content: '';
                            width: 1.6vw;
                            height: 1.6vw;
                            border-top: 0.53vw solid #888888;
                            border-right: 0.53vw solid #888888;
                            transform: rotate(45deg);
                            position: absolute;
                            top: 1.6vw;
                            right: 0;
                        }


                    }
                }

                .title-right {
                    width: 20.27vw;
                    height: 11.2vw;
                    padding: 3.2vw;

                    .idy-info {
                        width: 13.6vw;
                        height: 4.8vw;
                        padding: 0.8vw 2.13vw;
                        background: #f3f5f7;
                        border-radius: 2.67vw;
                        font-size: 3.07vw;
                        color: #555555;
                        line-height: 3.2vw;
                        text-align: center;

                        span {
                            font-size: 2.67vw;
                        }
                    }

                }
            }

            .sec3-content {
                width: 91.47vw;
                height: 20vw;

                .ct-list {
                    width: 100%;
                    height: 20vw;
                    padding: 2.93vw 0 2.67vw;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: center;

                    .ct-item {
                        width: 22.93vw;
                        height: 20vw;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;

                        span {

                            &:first-child {

                                i {
                                    &:first-child {
                                        color: #000000;
                                        font-size: 4.53vw;
                                    }

                                    &:last-child {
                                        color: #111111;
                                        font-size: 3.07vw;
                                    }
                                }
                            }

                            &:nth-child(2) {
                                color: #111111;
                                font-size: 3.47vw;
                                margin-top: 0.53vw;
                            }

                            &:last-child {
                                color: #888888;
                                font-size: 2.67vw;
                            }
                        }
                    }

                }
            }
        }

        .mine-sec4 {
            width: 93.6vw;
            height: 27.73vw;
            background-color: #fff;
            margin-bottom: 2.13vw;
            padding: 0 5.33vw 0 1.07vw;
            border-radius: 2.67vw;
            background-image: url(../images/mineImg/10009.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-position: 0 0;

            .sec4-title {
                width: 87.2vw;
                height: 8vw;
                padding: 3.2vw 3.2vw 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .title-text {
                    font-size: 4vw;
                    color: #000;
                    width: 16vw;
                    height: 4.8vw;
                }
            }

            .sec4-ct {
                width: 87.2vw;
                height: 19.73vw;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;

                .ct-left {
                    width: 34.4vw;
                    height: 19.73vw;
                    padding: 2.93vw 0 2.13vw;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;

                    .sal {
                        letter-spacing: 0;


                        span {
                            &:first-child {
                                color: #111;
                                font-size: 3.2vw;
                            }

                            &:nth-child(2) {
                                color: #111;
                                font-size: 6.13vw;
                                padding: 0 0.8vw 0 0.27vw;
                            }

                            &:last-child {
                                color: #111;
                                font-size: 3.2vw;
                            }
                        }

                    }

                    span {
                        color: #111;
                        font-size: 3.2vw;
                    }

                }

                .ct-right {
                    height: 19.73vw;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;

                    .ct-item {
                        width: 25.33vw;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        margin-right: 1.33vw;

                        &:first-child {
                            background-image: url(../images/mineImg/10010.png);
                            background-repeat: no-repeat;
                            background-size: 100% 84%;

                        }

                        &:last-child {
                            background-image: url(../images/mineImg/10011.png);
                            background-repeat: no-repeat;
                            background-size: 100% 84%;
                        }


                        span {
                            width: 100%;
                            height: 100%;
                            display: block;
                            font-size: 3.2vw;
                            color: #6e7c91;
                            margin-bottom: 4vw;
                            padding-top: 11.2vw;

                        }

                    }
                }
            }

        }

        .mine-sec5 {
            width: 93.6vw;
            height: 30.4vw;
            background-color: #fff;
            margin-bottom: 2.13vw;
            padding: 0 1.07vw 2.13vw;
            border-radius: 2.67vw;


            .sec5-title {
                width: 91.47vw;
                height: 8vw;
                padding: 3.2vw 3.2vw 0;
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .title-text {
                    font-size: 4vw;
                    color: #000;
                    width: 16vw;
                    height: 4.8vw;
                }
            }

            .sec5-ct {
                width: 91.47vw;
                height: 20.27vw;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;

                ul {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;

                    li {
                        width: 22.93vw;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        margin-right: 1.33vw;
                        padding: 2.93vw 0 2.67vw;

                        img {
                            width: 9.6vw;
                            height: 9.6vw;
                            margin-bottom: 1.07vw;

                        }

                        span {
                            width: 100%;
                            height: 100%;
                            display: block;
                            font-size: 3.47vw;
                            color: #111;


                        }


                    }
                }
            }


        }
    }
}